<!-- 模块说明 -->
<template>
    <div>
        <div class="top">
            <div>
                <van-nav-bar title="余额" left-text="" right-text="收费说明" @click-right="showPopup" left-arrow
                    @click-left="onClickLeft" />
            </div>
        </div>
        <div class="center">
            <div class="center_bg">
                <img src="https://img0.baidu.com/it/u=1589707643,755763264&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083"
                    alt="" />
            </div>
            <div class="center_con">
                <div class="d1">
                    <div class="d2">余额(元)</div>
                    <div class="d3">0.00</div>
                </div>
                <div class="d4">
                    <div>
                        <div class="d5">累计提现(元)</div>
                        <div class="d6">0.00</div>
                    </div>
                    <van-button round color="#ccad74" plain>&emsp;提现&emsp;</van-button>
                </div>
            </div>
        </div>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
            <div style="width: 93%; line-height: 28px; margin: 0 auto;">
                账户累计提现不足500元按提现金额的1%收取, 累计提现含未处理完成的)大于等于500元时, 按提现金额的5%收取手续费, 最低手续费1元, 不足0.1元的部分按0.1元收取。账户余额可以直接在旧书街上购买书籍，这样可以避免提现手续费损失哦
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { showToast } from 'vant';
import { ref } from 'vue'

const onClickLeft = () => history.back();
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
</script>

<style lang="scss" scoped>
.top {
    height: 7vh;
}

.center {
    .center_bg {
        // z-index: 1;
        height: 230px;
        position: fixed;
        width: 100vw;

        img {
            z-index: 1;
            width: 100%;
            height: 230px;
            filter: blur(40px);
        }
    }

    .center_con {
        position: fixed;
        width: 89%;
        height: 200px;
        border-radius: 10px;
        // border: 1px solid red;
        background: #fff;
        z-index: 33;
        margin-top: 20px;
        margin-left: 20px;

        .d1 {
            text-align: center;

            .d2 {
                font-size: 18px;
                margin-top: 10px;
            }

            .d3 {
                font-weight: bold;
                font-size: 28px;
                margin-top: 10px;
            }
        }

        .d4 {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 40px;

            .d5 {
                font-size: 18px;
            }

            .d6 {
                font-size: 18px;
                font-weight: bold;
                margin-left: 20px;
                margin-top: 10px;
            }
        }
    }
}

</style>
